<ng-container *ngIf="needFilterBuilder">
    <h5 class="card-title m-t-5 m-b-10">查询条件：</h5>

    <dx-filter-builder class="my-filter-builder" [style.background-color]="filterBuilderBackgroundColor"
        (onValueChanged)="filterBuilderValueChanged($event)" (fieldsChange)="filterBuilderFieldsChanged($event)">
    </dx-filter-builder>

    <div class="subtitle m-t-10 m-b-10">提示：点击 + 添加数据查询条件，可以选择字段、操作符和值。多个条件可以设置逻辑运算。</div>

    <!-- Search and clear filter buttons -->
    <div class="m-b-10">
        <button type="button" class="btn btn-info btn-sm" style="width: 70px" (click)="applyFilter()">
            <i class="fa fa-search"></i> 查询
        </button>
        <button type="button" class="btn btn-secondary btn-sm m-l-10" (click)="clearFilter()">
            清空
        </button>
    </div>
</ng-container>

<!-- Clear selection button -->
<dx-button *ngIf="enableMutipleSelection" text="Clear Selection ({{selectedRowKeys?.length}})"
    [disabled]="!selectedRowKeys?.length" (onClick)="grid.instance.clearSelection()">
</dx-button>

<!-- Data Grid -->
<dx-data-grid #grid id="gridContainer" [loadPanel]="{enabled: false}" [keyExpr]="keyName"
    [masterDetail]="{enabled: masterDetail !== undefined, template: masterDetail?.templateName}"
    [allowColumnResizing]="allowColumnResizing" columnResizingMode="widget" [columnMinWidth]="columnMinWidth"
    [rowAlternationEnabled]="rowAlternationEnabled" [hoverStateEnabled]="hoverStateEnabled" [showColumnLines]="true"
    [columnAutoWidth]="columnAutoWidth" [showRowLines]="true" [showBorders]="true"
    (onSelectionChanged)="onSelectionChanged($event)" (onContentReady)="onContentReady($event)">
    <!-- Data Grid Paging Setting -->
    <dxo-paging [enabled]="false"></dxo-paging>

    <!-- Enables Data Grid Mutiple Selection -->
    <dxo-selection *ngIf="enableMutipleSelection" mode="multiple"></dxo-selection>

    <!-- Generates Data Grid Columns -->
    <ng-container *ngFor="let col of columns">
        <!-- Data Grid Column Definiton -->
        <dxi-column [caption]="col.title" [dataField]="col.dataField" [width]="col.width"
            [cellTemplate]="col.templateName" [allowSorting]="col.allowSorting" [dataType]="col.dataType">
        </dxi-column>

        <!-- Data Grid Column Custmized Template Which Projected Into Here -->
        <div *dxTemplate="let cell of col.templateName">
            <ng-template [ngTemplateOutlet]="col.template" [ngTemplateOutletContext]="{$implicit: cell.data}">
            </ng-template>
        </div>
    </ng-container>

    <!-- Data Grid Master Detail Custmized Template Which Projected Into Here -->
    <div *dxTemplate="let cell of masterDetail?.templateName">
        <ng-template [ngTemplateOutlet]="masterDetail?.template" [ngTemplateOutletContext]="{$implicit: cell.data}">
        </ng-template>
    </div>
</dx-data-grid>

<!-- Paginator Settings -->
<div *ngIf="enablePaging">
    <op-paginator #paginator [length]="totalRowsCount" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions"
        [currentPage]="currentPage" [showFirstLastButtons]="true" [pageLinkSize]="pageLinkSize"
        (pageChanged)="onPageChanged($event)">
    </op-paginator>
</div>

<div *ngIf="!enablePaging">
    <span class="pull-left" style="margin-top: 8px;">
        <!-- This is data summary -->
        共 {{totalRowsCount}} 条
    </span>
</div>